import {productMessages} from "../goods.js";
export let name = "product-bigImg-page";
export function Render(){
    return`
    <style>
    .bigImg{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    }
    .bigImg .imgSrc{
    width: 100%;
    position: fixed;
    top: 30%;
    left: 0;
    background-color: white;
    }
    .bigImg .imgSrc img{
    width: 100%;
    }
    .bigImg .backGround{
    height: 30%;
    }
    .bigImg .backGround:nth-child(3){
    height: 24%;
    position: fixed;
    bottom: 0;
    left: 0;
    }
</style>
<div class="bigImg" style="display: none">
        </div>
    `
}
export function afterRender(){
    let bigImg = document.querySelector(".bigImg");
    //点击图片放大商品图片
    let goodsImg = document.querySelector(".goods-img");

    goodsImg.addEventListener("click", function () {
        bigImg.style.display = "block";
    })
}